<template>
  <div class="detail">
    <header>
      <div class="one" :style="{ opacity: headerOpacity, zIndex: showHeader ? 99 : 1 }">
        <icon class="left" name="arrow-left" @click="router.back()" />
        <icon class="user" name="user-o" />
      </div>

      <div class="two" :style="{ opacity: 1 - headerOpacity, zIndex: showHeader ? 1 : 99 }">
        <icon class="left" name="arrow-left" @click="router.back()" />
        <div>
          <div class="btn" :class="{ active: activeIndex == 0 }" @click="activeIndex = 0">
            商品详情
          </div>

          <div class="btn" :class="{ active: activeIndex == 1 }" @click="activeIndex = 1">
            商品评价
          </div>
        </div>
        <icon class="user" name="user-o" />
      </div>

    </header>

    <section ref="section">
      <div class="content">

        <swipe class="my-swipe" :autoplay="3000">
          <swipe-item>
            <img :src="this.baseUrl + good.img_url">
          </swipe-item>
          <swipe-item>
            <img :src="this.baseUrl + '/img/detail/swipe2.jpeg'">
          </swipe-item>
          <swipe-item>
            <img :src="this.baseUrl + '/img/detail/swipe3.jpeg'">
          </swipe-item>
          <swipe-item>
            <img :src="this.baseUrl + '/img/detail/swipe4.jpeg'">
          </swipe-item>
          <swipe-item>
            <img :src="this.baseUrl + '/img/detail/swipe5.jpeg'">
          </swipe-item>
          <swipe-item>
            <img :src="this.baseUrl + '/img/detail/swipe6.jpeg'">
          </swipe-item>

          <template #indicator="{ active, total }">
            <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
          </template>
        </swipe>

        <div class="title">
          <div class="name">
            <h3>{{ good.name }}</h3>
            <span>入口清新淡雅，多泡后甜味不减，适合口感较淡的。</span>
          </div>
          <div class="price">
            <div>
              <span>￥<span>{{ good.price }}</span></span>
              /
              <span>250g</span>
            </div>
            <div>价格:<del>￥{{ good.price + 100 }}</del></div>
          </div>
        </div>

        <div class="product-detail" ref="productDetail">

          <div class="item">
            <h1>商品详情</h1>
            <div class="product-content">
              <p>
                品饮一款普洱茶，香气滋味是很重要的评判标准，而因为糯米香叶的缘故。这款糯米小熟沱呈现自然糯米香，醇香无比，茶汤温润如玉。
              </p>
              <img v-lazy="this.baseUrl + good.img_url" />
            </div>
          </div>

          <div class="item">
            <h1>一颗一泡好滋味</h1>
            <div class="product-content">
              <p>
                这款糯米香小熟沱，最吸引人的地方，应该是一颗一泡的设计，便捷性是普通的普洱茶饼无法比拟的。
                <br>
                不过因为要揉搓成一颗小沱茶，对茶叶干茶的破坏比较大，叶底比较细碎，用大杯子冲泡的时候，会有小部分的悬浮，造成了品饮的体验不够完美。
              </p>
              <img v-lazy="this.baseUrl + good.img_url" />
            </div>
          </div>

          <div class="item">
            <h1>糯米香迷人 口感更温润</h1>
            <div class="product-content">
              <p>
                品饮一款普洱茶，香气滋味是很重要的评判标准，而因为糯米香叶的缘故。这款糯米小熟沱呈现自然糯米香，醇香无比，茶汤温润如玉。
              </p>
              <img v-lazy="this.baseUrl + good.img_url" />
            </div>
          </div>

        </div>

      </div>
    </section>

    <footer>
      <action-bar>
        <action-bar-icon icon="chat-o" text="客服" />
        <action-bar-icon icon="cart-o" text="购物车" @click="$router.replace('/cart')"/>
        <action-bar-icon icon="star-o" text="已收藏" />
        <action-bar-button type="warning" text="加入购物车" @click="handleAddCard" />
        <action-bar-button type="danger" text="立即购买" />
      </action-bar>
    </footer>
  </div>
</template>

<script setup>
//引入better-scroll
import BScroll from '@better-scroll/core'
import ObserveDOM from '@better-scroll/observe-dom'
import ObserveImage from '@better-scroll/observe-image'

import { Swipe, SwipeItem, Icon } from 'vant'
import { ActionBar, ActionBarIcon, ActionBarButton, Notify } from 'vant'
import { ref, onMounted, reactive, onActivated } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { get_goods } from '@/api/goodsApi.js'
import { useStore } from 'vuex'

const router = useRouter()
const route = useRoute()
const store = useStore()

const productDetail = ref()
//设置页面滚动
const section = ref()
onMounted(() => {
  BScroll.use(ObserveDOM)
  BScroll.use(ObserveImage)
  let bs = new BScroll(section.value, {
    probeType: 3,
    observeDOM: true,
    observeImage: true
  })

  //头部淡入淡出
  bs.on('scroll', ({ y }) => {
    y = Math.abs(y) + 45

    let start = productDetail.value.offsetTop - y
    if (start < 100 && start > 0) {
      let opacity = start / 100
      opacity = opacity > 1 ? 1 : opacity
      headerOpacity.value = opacity
    } else if (start < 0) {
      headerOpacity.value = 0
    } else if (start > 100) {
      headerOpacity.value = 1
    }

    if (y > productDetail.value.offsetTop) {
      showHeader.value = false
      activeIndex.value = 0
    } else if (y < productDetail.value.offsetTop) {
      showHeader.value = true
      activeIndex.value = 0
    }
  })
})

//控制头部展示
const showHeader = ref(true)
const activeIndex = ref(0)
const headerOpacity = ref(1)

//获取数据
const good = ref({})
const getData = async () => {
  good.value = await get_goods(route.query.id)
}
getData()

//组件保活设置
let id = route.query.id
onActivated(() => {
  if (id != route.query.id) {
    id = route.query.id
    getData()
  }
})

const handleAddCard = () => {
  if (!store.state.user) {
    router.push('/login')
  } else {
    // 添加商品到购物车
    let cartItem = {
      goods: good.value,
      num: 1,
      checked: false
    }
    store.commit('addGoods2cart', cartItem)
    Notify({type: 'success', message: '添加成功'})
  }
}
</script>

<style lang="less" scoped>
.detail {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;

  header {
    height: 45px;
    z-index: 999;
    position: relative;

    .one {
      position: absolute;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      height: 45px;
      padding: 0 5px;

      .left {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, .3);
        font-size: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-weight: 400;
      }

      .user {
        margin-left: auto;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, .3);
        font-size: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-weight: 400;
      }
    }

    .two {
      position: absolute;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      height: 45px;
      padding: 0 5px;
      background-color: #fff;

      >div {
        width: 200px;
        height: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;

        .btn {
          width: 100px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 16px;
        }

        .active {
          border-bottom: 2px solid rgb(221, 39, 39);
        }
      }

      .left {
        width: 35px;
        height: 35px;
        font-size: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #222;
        font-weight: 400;
      }

      .user {
        width: 35px;
        height: 35px;
        font-size: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #222;
        font-weight: 400;
      }
    }
  }

  section {
    flex: 1;
    overflow: hidden;
    margin-top: -45px;

    .content {

      .my-swipe {
        .van-swipe-item {
          width: 375px;
          height: 375px;
          background-color: #fff;

          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        .custom-indicator {
          position: absolute;
          right: 5px;
          bottom: 5px;
          padding: 2px 5px;
          font-size: 12px;
          background: rgba(0, 0, 0, 0.3);
          color: #fff;
        }
      }

      .title {
        .name {
          padding: 10px 10px 0;

          h3 {
            font-size: 18px;
            font-weight: normal;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          span {
            font-size: 14px;
            color: #999;
            margin-top: 6px;
            display: inline-block;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          &::after {
            content: '';
            display: block;
            height: 1px;
            background-color: #e3e5e9;
            margin: auto;
            margin-top: 15px;
            width: 90vw;
            transform: scaleY(.5);
          }
        }

        .price {
          padding: 10px 12px 0;

          div:nth-of-type(1) {
            color: #949494;

            span:nth-of-type(1) {
              color: #D22531;
              display: inline-block;
              margin-right: 5px;

              span {
                font-size: 28px;
              }
            }

            span:nth-of-type(2) {
              display: inline-block;
              margin-left: 5px;
              color: #949494;
              font-size: 15px;
            }
          }

          div:nth-of-type(2) {
            margin-top: 2px;
            font-size: 13px;
            color: #999;
          }
        }
      }

      .product-detail {
        padding: 20px 10px;

        .item {
          h1 {
            font-size: 15px;
            font-weight: 700;
            border-left: #DD2727 solid 5px;
            padding-left: 10px;
            margin: 15px 0;
          }

          p {
            font-size: 16px;
            font-weight: 400;
            line-height: 32px;
            color: rgb(34, 34, 34);
          }

          img {
            width: 355px;
            height: 235px;
          }
        }

      }

    }
  }

  footer {
    margin-top: auto;
    height: 50px;
  }
}
</style>